<template>
  <div class="chart">
    <div
      id="chart"
      class="monitorContainer"
      :class="chartData.xAxisData.length > 0 ? 'show' : 'hidden'"
    />
    <empty-data-chart :is-empty="chartData.xAxisData.length === 0" />
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, nextTick } from 'vue';
import EmptyDataChart from '@/components/empty-data-chart/index.vue';
import { getSalesChartData } from '@/api/earch/sales.js';

// 响应式数据
const chartData = ref({
  xAxisData: [],    // 对应time数据
  seriesData: [],   // 对应price数据
  yAxisName: '销售额（元）'
});

// 样式配置（保持原样）
const axisStyleColor1 = ref('#D9D9D9');
const axisStyleColor2 = ref('#999999');
const lineStyleColor = ref('#FF5757');
const areaStyleColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  { offset: 0, color: 'rgba(255, 87, 87, 0.5)' },
  { offset: 0.3, color: 'rgba(255, 169, 169, 0.3)' },
  { offset: 1, color: 'rgba(255, 169, 169, 0)' },
]);

// 获取数据并更新图表
const fetchData = async () => {
  try {
    const res = await getSalesChartData();
    console.log('完整响应结构:', res); // 关键调试语句
    // 假设接口返回数据结构为：{ data: [{ time: '2023-01', price: 100 }, ...] }
    chartData.value.xAxisData = res.map(item => item.time);
    chartData.value.seriesData = res.map(item => item.price);
    setOption();
  } catch (error) {
    console.error('获取销售数据失败:', error);
  }
};

// 图表配置
const setOption = () => {
  const chartDom = document.getElementById('chart');
  const myChart = echarts.init(chartDom);
  
  const option = {
    title: {
      text: '销售额趋势图',
      left: 'center',
      top: '10',
      textStyle: {
        color: '#333333',
        fontWeight: 'bolder',
        fontSize: 14,
      },
    },
    grid: {
      left: '30',
      right: '33',
      top: '60',
      bottom: '5',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: chartData.value.xAxisData,
      axisLine: { lineStyle: { color: axisStyleColor1.value } },
      axisTick: { show: true, lineStyle: { color: axisStyleColor1.value } },
      axisLabel: { align: 'center', color: axisStyleColor2.value },
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      name: chartData.value.yAxisName,
      nameTextStyle: { color: axisStyleColor2.value },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { color: axisStyleColor2.value },
      splitLine: { lineStyle: { color: axisStyleColor1.value } },
    },
    series: [{
      type: 'line',
      data: chartData.value.seriesData,
      smooth: true,
      lineStyle: {
        color: lineStyleColor.value,
        width: 3,
        shadowColor: 'rgba(222, 115, 127, 0.23)',
        shadowBlur: 10,
        shadowOffsetY: 8,
      },
      areaStyle: { color: areaStyleColor },
    }],
    tooltip: {
      trigger: 'axis',
      axisPointer: { lineStyle: { color: axisStyleColor1.value, width: 2 } },
      formatter: '销售额：{c}元<br />时间：{b}',
      backgroundColor: '#FFFFFF',
      borderColor: '#eef3f8',
      borderWidth: 1,
      textStyle: { color: '#8C8C8C' },
      padding: 12,
    }
  };

  nextTick(() => {
    myChart.setOption(option);
    window.addEventListener('resize', () => myChart.resize());
  });
};

// 生命周期
onMounted(async () => {
  await fetchData();
});
</script>